
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <th:block th:include="include :: header('用户信息')"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: select2-css" />
    <style type="text/css">
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff!important;
            cursor: pointer!important;
            display: inline-block!important;
            font-weight: 700!important;
            margin-right: 3px!important;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #1AB394!important;
            border-color: #1AB394!important;
            padding: 1px 10px!important;
            color: #fff!important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="ibox">
        <div class="ibox-content">
           <form class="form form-horizontal" id="userForm" autocomplete="off">
                 <input type="hidden" name="id" id="id" th:value="${id}">
<!--                <input name="deptId" type="hidden" id="treeId">-->
                <h4 class="form-header h4">基本信息</h4>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-3 control-label is-required">登录账号：</label>
                            <div class="col-sm-6">
                                <input id="loginName" name="loginName" placeholder="请输入登录账号"  class="form-control" type="text" maxlength="30" data-rule="required;username;"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">归属部门：</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <input type="hidden" name="deptId"  id="deptId"  placeholder="" class="form-control" value="0">
                                    <input type="text" class="form-control" id="parentDept" checks="0" readonly textLabel="jasontext" />
                                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               <div class="row">
                   <div class="col-sm-6">
                       <div class="form-group">
                           <label class="col-sm-3 control-label is-required">用户名：</label>
                           <div class="col-sm-6">
                               <input id="userName" name="userName" placeholder="请输入用户名" class="form-control" type="text" maxlength="30"  data-rule="required;length(1~30)">
                           </div>
                       </div>
                   </div>
                   <div class="col-sm-6">
                       <div class="form-group">
                           <label class="col-sm-3 control-label is-required">登录密码：</label>
                           <div class="col-sm-6">
                               <div class="input-group">
                                   <input id="passWord" name="passWord" placeholder="请输入登录密码" class="form-control" type="text" value="123456" maxlength="30"  data-rule="required;password">
                                   <span class="input-group-addon"><i class="fa fa-key"></i></span>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号码：</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <input id="mobilePhone" name="mobilePhone" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11" data-rule="mobile">
                                    <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">邮箱：</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <input id="email" name="email" class="form-control email" type="text" maxlength="50" placeholder="请输入邮箱" data-rule="email;">
                                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户性别：</label>
                            <div class="col-sm-6">
                                <select name="gender" class="form-control m-b">
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                    <option value="2">未知</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">用户状态：</label>
                            <div class="col-sm-4">
                                <label class="toggle-switch switch-solid">
                                    <input type="checkbox" id="userStatus" value="1" name="userStatus" checked="checked">
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">超管：</label>
                            <div class="col-sm-6">
                                <label class="toggle-switch switch-solid">
                                    <input type="checkbox" id="isSuper" value="1" name="isSuper">
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
               <div class="row">
                   <div class="col-sm-6">
                       <div class="form-group">
                           <label class="col-sm-3 control-label">岗位：</label>
                           <div class="col-sm-6">
                               <select id="position" name="position" class="form-control select2-multiple" multiple>
                                   <option th:each="post,postStat:${positions}" th:value="${post.id}">[[${post.name}]]</option>
                               </select>
                           </div>
                       </div>
                   </div>
                   <div class="col-sm-6">

                   </div>
               </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">角色：</label>
                            <div class="col-xs-8">
<!--                                <div class="radio radio-success radio-inline" th:each="role,state : ${roles}">-->

<!--                                    <label th:for="${eleId}"><input th:with="eleId=${state.index==0}?'roleId':'roleId'+${state.index}" th:id="${eleId}" name="roleId" type="radio" th:value="${role.id}"></label>-->
<!--                                </div>-->
                                <label th:each="role,state:${roles}" class="check-box checkbox-success">
                                    <input type="radio" class="icheck" th:with="eleId=${state.index==0}?'roleId':'roleId'+${state.index}" th:id="${eleId}" name="roleId" th:value="${role.id}">
                                    [[${role.name}]]
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <h4 class="form-header h4">其他信息</h4>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">备注：</label>
                            <div class="col-xs-6">
                                <textarea id="remark" name="remark" maxlength="500" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
               <div class="footerbar">
                   <div class="col-sm-12 col-sm-offset-3">
                       <button class="btn btn-primary" type="submit">
                           <i class="fa fa-check"></i>
                           保存
                       </button>
                       <button class="btn btn-danger" type="button" onclick="cancel()">
                           <i class="fa fa-reply-all"></i>关闭
                       </button>
                   </div>
               </div>
            </form>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: select2-js" />
<!-- jquery-validate 表单树插件 -->
<script type="text/javascript" th:inline="javascript">
    let postSelect2;
    $(function () {
        $('#userForm').validator({
            stopOnError: false,
            timely: 2,
            theme: "yellow_right",
            valid: function (form) {
               //console.log(form);
                let deptId=$('#parentDept_checkedIds').val();
                $('#deptId').val(deptId);
               jutils.ajaxPost("/admin/sysuser/save",$(form).serialize(),function (res){
                               if(res.status){
                                   jutils.postMessage('userForm',"message from user");
                                   cancel();
                               }
               });
            },
        });

        postSelect2= $('#position').select2({
            placeholder:"请选择岗位",
            allowClear: true
        });

        loadModel();
    });
    function loadModel(){
        let id=$('#id').val();
        if(jutils.emptyId(id)){

            initSelectTree();
            return;
        }
        jutils.ajaxGet('/admin/sysuser/getmodel',{id:id},function(res){
           // console.log(res);
            if(res.status){
                let model=res.data.model;
                $('#userForm').initFormData(model);
                $('#parentDept').attr('checks',model.deptId);

                postSelect2.val(model.positionList).trigger("change");
                initSelectTree();
            }
        });
    }

    function initSelectTree() {

        jutils.ajax('get',false,'/admin/dept/getDeptZtree',null,function(res){
            if(res.status){
                let defaults = {
                    chkStyle: "radio",
                    zNodes: res.data.ztreeData,
                    height: 333   // 默认自定义下拉框高度
                }
                let tree= $("#parentDept").drawMultipleTree(defaults);
            }
        })


    }

    function cancel(){
        jutils.closeTab('userTab');
    }

</script>
</body>
</html>